<template>
  <div class="material-manage">
    <div class="material-event">
      <div class="topBtn-query">
        <a-input-search
          v-model="filterText"
          placeholder="请输入关键字查询"
          enter-button
          @search="onSearch"
          style="width:300px"/>
      </div>
    </div>
    <div class="flex-1 flex-column" style="display: flex; height: 90%">
      <div class="over-flow-hidden" style="overflow: auto;">
        <a-table
          bordered
          class="dist-box-table"
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="replaceMaterialRecordList"
          :default-expand-all-rows="true"
          :custom-row="customRow"
          :pagination="false"
        >
          <!--    替换文件（包含浏览、下载）    -->
          <template slot="materialFiles" slot-scope="text, record">
            <div v-if="record.materialFiles && record.materialFiles.length" class="text-align-left">
              <div
                class="dir-file-item cur-pointer"
                v-for="file in record.materialFiles"
                :key="file.id">
                <div>
                  <svg width="18" height="18" class="v-t-top m-r-xs">
                    <use :xlink:href="file.icon"></use>
                  </svg>
                  <span v-if="file.uploadType === 2" class="color-text">（{{ file.unitName }}）</span>
                  <span class="color-text">{{ file.name }}</span>
                  <span class="pull-right hide">
                  <i
                    v-for="auth in customHandle.materialFile"
                    :key="Math.random()"
                    :class="[auth.icon]"
                    :title="auth.name"
                    :style="{ color: auth.color }"
                    class="iconfont m-l-sm cursor-pointer"
                    @click.stop="handleClick(auth, file, record)"
                  />
                </span>
                </div>
                <div class="hide w-full m-t-xs f12 file-size">
                  <!--     文件大小和上传时间      -->
                  {{ file.fileSize }}
                  <span class="pull-right">{{ moment(file.uploadTime) }}</span>
                </div>
              </div>
            </div>
          </template>
          <!--    操作时间    -->
          <template slot="createDate" slot-scope="text, record">
            <span>{{moment(record.createDate)}}</span>
          </template>
          <!--    操作    -->
          <template slot="action" slot-scope="text, record">
            <div v-for="auth in customHandle.replaceRecord">
              <a-button :type="auth.type" @click="imageFileView(record)">{{auth.name}}</a-button>
            </div>
          </template>
        </a-table>
      </div>
      <!--    右下角的分页框  -->
      <div class="table-pagination">
        <a-pagination
          :current="currentPage"
          :pageSize="pageSize"
          :total="pageTotal"
          @change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import interfaceMonitorService from '@/api/interfaceMonitorService'
import moment from 'moment'

const columns = [
  {
    title: '操作人员',
    dataIndex: 'operator',
    key: 'operator',
    width: '10%',
    ellipsis: true,
    scopedSlots: { customRender: 'operator' },
    align: 'center'
  },
  {
    title: '材料更换说明',
    dataIndex: 'replaceInfo',
    key: 'replaceInfo',
    width: '20%',
    scopedSlots: { customRender: 'replaceInfo' },
    align: 'center'
  },
  {
    title: '更换材料',
    dataIndex: 'materialFiles',
    key: 'materialFiles',
    width: '30%',
    scopedSlots: { customRender: 'materialFiles' },
    align: 'center'
  },
  {
    title: '操作类型',
    dataIndex: 'type',
    key: 'type',
    width: '10%',
    scopedSlots: { customRender: 'type' },
    align: 'center'
  },
  {
    title: '操作时间',
    dataIndex: 'createDate',
    key: 'createDate',
    width: '20%',
    scopedSlots: { customRender: 'createDate' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: '10%',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]

const customHandle = {
  replaceRecord: [
    {
      name:'查看证明文件',
      type:'primary'
    }
  ],
  materialFile: [
    {
      name: '浏览',
      icon: 'icon-preview',
      cb: 'preView',
      color: '#8694E7'
    },
    {
      name: '下载',
      icon: 'icon-file-download',
      cb: 'download',
      color: '#7FB646'
    }
  ]
}

export default {
  name: "ReplaceMaterialsLog",
  props: {
    projectId:Number
  },
  data () {
    return {
      customHandle,
      columns,
      replaceMaterialRecordList:[],
      filterText:'',
      currentPage:1,
      pageTotal:1,
      pageSize:10
    }
  },
  mounted () {
    this.loadingData()
  },
  methods: {
    //加载数据
    loadingData() {
      interfaceMonitorService.getReplaceMaterialsRecord(
        this.projectId,
        this.filterText === ''?null:this.filterText,
        this.currentPage,
        this.pageSize
      ).then((d) => {
        if (d && d.total > 0) {
          this.pageTotal = d.total
          const list = d.rows
          list.forEach((item) => {
            //设置图标
            item.materialFiles.forEach(file => {
              file.icon = this.getFileIcon(file.extension)
            })
          })
          this.replaceMaterialRecordList = list
        }
      })
    },
    onSearch() {
      this.currentPage=1
      this.pageTotal=1
      this.loadingData()
    },
    //更换页面
    pageChange(page, pageSize) {
      this.currentPage = page
      this.loadingData()
    },
    //浏览和下载
    handleClick (item, record, directory) {
      switch (item.name) {
        case '下载': {
          this.download(record)
          break
        }
        case '浏览': {
          this.fileView(record)
        }
      }
    },
    //设置行属性和操作
    customRow (record, index) {
      return {
        on: {
        }
      }
    },
    //设置文件的图案
    getFileIcon (extension) {
      switch (extension.toLowerCase()) {
        case '.doc':
        case '.docx':
          return '#icon-file-doc'
        case '.ppt':
        case '.pptx':
          return '#icon-file-ppt'
        case '.xls':
        case '.xlsx':
          return '#icon-file-xls'
        case '.dwg':
          return '#icon-file-dwg'
        case '.txt':
          return '#icon-file-txt'
        case '.pdf':
          return '#icon-file-pdf'
        case '.zip':
          return '#icon-file-zip'
        default :
          return '#icon-file-tree'
      }
    },
    moment (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    fileView(file) {
      let owner = this
      owner.$dialog({
        content: () => import('@c/FileView/FileView.vue'),
        width: document.documentElement.clientWidth * 0.7,
        scrollable:true,
        bodyStyle: {
          height: document.documentElement.clientHeight * 0.9 + 'px',
          overflow: 'hidden',
          padding: '0px'
        },
        centered: true,
        maskClosable: true,
        footer:false,
        props: {
          params: file
        },
        on: {
          ok (ctl) {
          },
          cancel() {
          }
        }
      });
    },
    imageFileView(record) {
      let owner = this
      const fileViewUrl = window.config.VUE_APP_FILE_VIEW
      const intranet = window.config.VUE_APP_BASE_URL_INTRANET || window.config.VUE_APP_BASE_URL
      const baseUrl = window.config.VUE_APP_BASE_URL
      const fix = window.config.VUE_APP_BASE_URL.endsWith('/') ? '' : '/'
      let url;
      if (['pdf'].includes(record.proofFileType)) {
        url = baseUrl + fix + 'project/interfaceMonitor/getReplaceMaterialProofView?replaceMaterialRecordId=' +record.id
      } else {
        url = fileViewUrl + 'preview?viewMode=' + 'img' +
          '&fileUrl=' + intranet + 'project/interfaceMonitor/getReplaceMaterialProofView?replaceMaterialRecordId=' +record.id
      }
      owner.$dialog({
        content: () => import('@c/FileView/FileView.vue'),
        width: document.documentElement.clientWidth * 0.7,
        scrollable:true,
        bodyStyle: {
          height: document.documentElement.clientHeight * 0.9 + 'px',
          overflow: 'hidden',
          padding: '0px'
        },
        centered: true,
        maskClosable: true,
        footer:false,
        props: {
          params: {
            url:url
          }
        },
        on: {
          ok (ctl) {
          },
          cancel() {
          }
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
.material-manage {
  background: #fff;
  padding: 10px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  .material-event {
    display: flex;
    justify-content: space-between;
    padding: 0 2px 9px;
    height: 10%;

    .topBtn-query {
      display: flex;
      justify-content: flex-end;
      flex: 1;

      .search-btn {
        width: 45px;
      }
    }
  }

  /deep/ .ant-table-thead > tr > th {
    text-align: center;
  }

  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 8px 12px;
  }

  .upload-span {
    display: inline-block;
  }
}
.dir-file-item{
  padding: 5px;
  .file-size{
    padding-left: 22px;
    color: #999999;
  }
  &:hover {
    background: rgba(214,217,220,0.20);
    border-radius: 2px;
    .hide{
      display: inline-block;
    }
  }
  & + .dir-file-item{
    padding-top: 10px;
  }
}
.hide{
  display: none;
}
/deep/.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{
  background: transparent;
}
.color-text{
  color: #666666;
}
.table-pagination {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: 10px;
}
.ant-table-wrapper{
  /deep/ .ant-table{
    .ant-table-row{
      &.hover-row{
        background-color: #e7f1ff;
      }
    }
  }
}
</style>